@import './common/theme-vars.styl'
@import './common/colors.styl'

*
  padding 0
  margin 0
  box-sizing border-box
  overflow-anchor none

body, input, textarea, select
  color white
  font-family 'PingFang SC','Helvetica Neue',Helvetica,STHeitiSC-Light,WOL_SB,'Segoe UI Semibold','Segoe UI',Tahoma,Helvetica,'Microsoft Yahei',sans-serif
  font-weight 200
body
  background-color #1b1b1b
a
  color #fff

svg
  display block
  // 滚动条整体样式
::-webkit-scrollbar
  // 高宽分别对应横竖滚动条的尺寸
  width 5px
  height 5px
// 滚动条里面轨道
::-webkit-scrollbar-track
  border-radius 0
  padding 2px
  box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4)
  // background-color rgba(255,255,255,0.04)
// 滚动条里面小方块
::-webkit-scrollbar-thumb
  // border-left 4px solid #444
  background-color: #444

.scrollbar
  overflow overlay
// 在有滚动条的元素上加上该classname，只有鼠标进入元素区域内，滚动条才会有颜色
.scrollbar:hover::-webkit-scrollbar-thumb
  // border-left 4px solid themeColor
  background-color: themeColor

::-webkit-scrollbar-thumb:window-inactive
  // border-left 4px solid #444
  background-color: #444

.omit
  overflow hidden
  text-overflow ellipsis
  word-break keep-all
  white-space nowrap
.omit2
  overflow hidden
  text-overflow ellipsis
  display -webkit-box
  -webkit-line-clamp 2
  -webkit-box-orient vertical
.omit3
  overflow hidden
  text-overflow ellipsis
  display -webkit-box
  -webkit-line-clamp 3
  -webkit-box-orient vertical

.pr
  position relative
.pa
  position absolute
.hand
  cursor pointer
.clip
  overflow hidden
.hide
  display none
.block
  display block
.inlineBlock
  display inline-block
.oh
  overflow hidden
.h100p
  height 100%
.w100p
  width 100%
.wh100p
  width 100%
  height 100%
.h40
  height 40px
.w40
  width 40px
.h32
  height 32px
.w32
  width 32px
.lh40
  line-height 40px
.lh32
  line-height 32px

u(n)
  n == 0 ? n : unit(n, px)

for $n in 0 12 14 16 18 20 22 24 26 28 30
  .fs{$n}
    font-size u($n)
// all padding
for $n in 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30
  .p{$n}
    padding u($n)
// special padding
for $n in 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30
  .pt{$n}
    padding-top u($n)
  .pr{$n}
    padding-right u($n)
  .pb{$n}
    padding-bottom u($n)
  .pl{$n}
    padding-left u($n)
// all margin
for $n in 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30
  .m{$n}
    margin u($n)
// special margin
for $n in 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30
  .mt{$n}
    margin-top u($n)
  .mr{$n}
    margin-right u($n)
  .mb{$n}
    margin-bottom u($n)
  .ml{$n}
    margin-left u($n)

// 禁止选中
.noselect
  -webkit-touch-callout none
  -webkit-user-select none
  -khtml-user-select none
  -moz-user-select none
  -ms-user-select none
  user-select none

// 事件穿透
.noevent
  pointer-events none

for $n in 0 10 20 30 40 50 60 70 80 90 100
  .opacity{$n}
    opacity  u($n)

// 以下是通用功能
.grayNote
  border 1px dashed rgba(255,255,255,0.2)
  color rgba(255,255,255,0.5)
  padding 8px
  text-align center

// 删除超链接的下划线
a
  text-decoration none